import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../widget/custom_button.dart';
import 'login_controller.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
      init: LoginController(),
      builder: (controller) => Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/images/page_bg.png"),
                fit: BoxFit.fill)),
        child: GestureDetector(
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: Scaffold(
            resizeToAvoidBottomInset: false,
            extendBodyBehindAppBar: true,
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              elevation: 0,
              foregroundColor: Colors.transparent,
              backgroundColor: Colors.transparent,
            ),
            body: Stack(
              children: [
                Positioned(
                  top: 180.h,
                  left: 64.w,
                  child: _buildSignText(controller),
                ),
                Positioned(
                  left: 470.w,
                  top: 134.h,
                  child: _buildImageWidget(controller),
                ),
                Positioned(
                  top: 400.h,
                  left: 24.w,
                  child: _buildCenterWidget(controller),
                ),
                Positioned(
                  bottom: 0.h,
                  child: _buildAgreementWidget(controller),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  /// 顶部文字
  Widget _buildSignText(LoginController controller) {
    return Obx(
      () => InkWell(
        onLongPress: () => controller.changeUserState(),
        child: controller.isOwner.value
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "你好！",
                    style:
                        TextStyle(fontSize: 48.sp, fontWeight: FontWeight.w600),
                  ),
                  Text(
                    "欢迎使用小康管家",
                    style:
                        TextStyle(fontSize: 48.sp, fontWeight: FontWeight.w600),
                  )
                ],
              )
            : Column(
                children: [
                  SizedBox(height: 42.h),
                  Row(
                    children: [
                      InkWell(
                        child: Image.asset(
                          "assets/images/login_back_icon.png",
                          width: 48.w,
                          height: 48.w,
                        ),
                        onTap: () => controller.changeUserState(),
                      ),
                      Text(
                        "登录至物业端",
                        style: TextStyle(
                            fontSize: 48.sp, fontWeight: FontWeight.w600),
                      )
                    ],
                  ),
                ],
              ),
      ),
    );
  }

  /// 中间的组件
  _buildCenterWidget(LoginController controller) {
    return Container(
      height: 1224.h,
      width: 702.w,
      padding: EdgeInsets.only(
        left: 40.w,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(48.w),
          topRight: Radius.circular(48.w),
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            top: 120.h,
            child: _buildAccountText(controller),
          ),
          Positioned(
            top: 242.h,
            child: _buildPwdText(controller),
          ),
          Positioned(
            top: 456.h,
            child: _buildBottomWidget(controller),
          ),
        ],
      ),
    );
  }

  /// 顶部图片
  _buildImageWidget(LoginController controller) {
    return Obx(
      () => InkWell(
        onLongPress: () => controller.changeUserState(),
        child: Image.asset(
          controller.isOwner.value
              ? "assets/images/login_owner_icon.png"
              : "assets/images/login_property_icon.png",
          width: 280.w,
          height: 264.h,
        ),
      ),
    );
  }

  /// 手机号或账号组件
  Widget _buildAccountText(LoginController controller) {
    return Obx(
      () => SizedBox(
        width: 622.w,
        child: TextField(
          controller: controller.accountController,
          keyboardType: controller.isLoginByPhone.value
              ? TextInputType.phone
              : TextInputType.text,
          inputFormatters: controller.isLoginByPhone.value
              ? [
                  LengthLimitingTextInputFormatter(11),
                  FilteringTextInputFormatter.digitsOnly,
                ]
              : [],
          onChanged: (text) => controller.observerAccountText(text),
          decoration: InputDecoration(
            hintText: controller.isLoginByPhone.value ? "请输入手机号" : "请输入用户名",
            hintStyle:
                TextStyle(color: const Color(0xFF999999), fontSize: 32.sp),
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
            focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// 密码或验证码文本
  Widget _buildPwdText(LoginController controller) {
    return Obx(
      () => SizedBox(
        width: 622.w,
        //手机号登陆时默认使用数字键盘，验证码限制为6位数，密码限制为16位数
        child: TextField(
          controller: controller.pwdController,
          obscureText: controller.isLoginByPhone.value
              ? false
              : controller.isHidePwd.value,
          keyboardType: controller.isLoginByPhone.value
              ? TextInputType.phone
              : TextInputType.text,
          inputFormatters: controller.isLoginByPhone.value
              ? [
                  LengthLimitingTextInputFormatter(6),
                  FilteringTextInputFormatter.digitsOnly,
                ]
              : [
                  LengthLimitingTextInputFormatter(16),
                ],
          onChanged: (text) => controller.observerPwdText(text),
          decoration: InputDecoration(
            enabledBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
            focusedBorder: const UnderlineInputBorder(
              borderSide: BorderSide(
                color: Color(0xFFF2F0F0),
              ),
            ),
            hintText: controller.isLoginByPhone.value ? "请输入验证码" : "请输入密码",
            hintStyle:
                TextStyle(color: const Color(0xFF999999), fontSize: 32.sp),
            suffixIcon: controller.isLoginByPhone.value
                ? InkWell(
                    onTap: () => controller.hadSendCode.value
                        ? {}
                        : controller.getCode(),
                    child: Padding(
                      padding:
                          EdgeInsets.only(top: 24 - 30.h, bottom: 24 - 30.h),
                      child: Container(
                        width: 216.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(32.w),
                          border: Border.fromBorderSide(
                            BorderSide(
                                color: Color(controller.canSendCode.value
                                    ? 0xFF1774E0
                                    : 0xFF999999),
                                width: 2.w),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          controller.hadSendCode.value
                              ? "${controller.countDown}s"
                              : "发送验证码",
                          style: TextStyle(
                              fontSize: 32.sp,
                              color: Color(controller.canSendCode.value
                                  ? 0xFF1774E0
                                  : 0xFF999999)),
                        ),
                      ),
                    ),
                  )
                : InkWell(
                    onTap: () => controller.changePwdState(),
                    child: Container(
                      padding: EdgeInsets.all(23.h),
                      child: Image(
                          width: 48.w,
                          height: 48.h,
                          image: AssetImage(controller.isHidePwd.value
                              ? "assets/images/login_hide_pwd_icon.png"
                              : "assets/images/login_show_pwd_icon.png")),
                    ),
                  ),
          ),
        ),
      ),
    );
  }

  /// 底部按钮组件
  Widget _buildBottomWidget(LoginController controller) {
    return Obx(
      () => SizedBox(
        width: 622.w,
        child: Column(
          children: [
            CustomButton(
                text: controller.isOwner.value ? "登录/注册" : "登录",
                isAsh: controller.isButtonAsh.value,
                width: 622.w,
                height: 96.h,
                onPressed: () =>
                    controller.isButtonAsh.value ? () {} : controller.login()),
            SizedBox(
              height: 48.h,
            ),
            !controller.isOwner.value
                ? Row(
                    children: [
                      Expanded(
                          flex: 6,
                          child: InkWell(
                            onTap: () => controller.changeLoginMethod(),
                            child: Text(
                              controller.isLoginByPhone.value
                                  ? "账号密码登录"
                                  : "手机验证码登录",
                              style: TextStyle(
                                  fontSize: 28.sp,
                                  color: const Color(0xFF999999)),
                            ),
                          )),
                      Expanded(
                          flex: 4,
                          child: InkWell(
                              onTap: () => controller.buildForgetPage(),
                              child: Container(
                                alignment: Alignment.centerRight,
                                child: Text(
                                    controller.isLoginByPhone.value
                                        ? ""
                                        : "忘记密码",
                                    style: TextStyle(
                                        fontSize: 28.sp,
                                        color: const Color(0xFF999999))),
                              )))
                    ],
                  )
                : Text(
                    "",
                    style: TextStyle(fontSize: 28.sp),
                  ),
          ],
        ),
      ),
    );
  }

  /// 协议组件
  Widget _buildAgreementWidget(LoginController controller) {
    return Obx(
      () => Visibility(
        visible: controller.isOwner.value,
        child: SizedBox(
          width: 1.sw,
          child: Row(
            children: [
              SizedBox(
                width: 80.w,
              ),
              InkWell(
                child: SizedBox(
                  height: 172.w,
                  child: Row(
                    children: [
                      SizedBox(
                        width: 92.w,
                      ),
                      Image.asset(
                        controller.isSelectedAgreement.value
                            ? "assets/images/login_select_agreement_icon.png"
                            : "assets/images/login_unselect_agreement_icon.png",
                        width: 28.w,
                        height: 28.w,
                      ),
                      SizedBox(
                        width: 12.w,
                      ),
                      Text(
                        "已阅读",
                        style: TextStyle(
                            fontSize: 24.sp, color: const Color(0xFF999999)),
                      ),
                    ],
                  ),
                ),
                onTap: () => controller.changeAgreementState(),
              ),
              Text(
                "并同意",
                style:
                    TextStyle(fontSize: 24.sp, color: const Color(0xFF999999)),
              ),
              InkWell(
                child: Text(
                  "《软件认可及服务协议》",
                  style: TextStyle(
                      fontSize: 24.sp, color: const Color(0xFF1774E0)),
                ),
                onTap: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}
